"use client";

import { useEffect, useRef } from "react";
import mermaid from "mermaid";

export default function MermaidRender({ chart }: { chart: string }) {
  mermaid.initialize({
    startOnLoad: true,
    theme: "default", // 避免变成 dark
    themeVariables: {
      background: "#ffffff",
      primaryColor: "#f1f5f9", // 节点背景色
      primaryTextColor: "#1e293b", // 节点文字色
      fontSize: "16px",
      fontFamily: "sans-serif",
    },
  });
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (ref.current) {
      mermaid.initialize({ startOnLoad: false });
      mermaid.render(`mermaid-${Date.now()}`, chart).then(({ svg }) => {
        ref.current!.innerHTML = svg;
      });
    }
  }, [chart]);

  return <div ref={ref} className="my-4" />;
}
